<template>
  <el-dialog :title="form.id ? '编辑部门' : '新增部门'" :visible="dialogShow">
    <el-form :model="form" :rules="rules" ref="myform" label-width="130px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择">
          <el-option v-for="(item, index) in empList" :key="item.index" :label="item.username" :value="item.username">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeptListApi, addDeptApi, getDeptByIdApi, editDeptByIdApi } from '@/api/departments.js'
import { getEmpListApi } from '@/api/employees'
export default {
  props: ['dialogShow', 'currentid'],
  data() {
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度为1~50', trigger: 'blur' },
          {
            validator: async (rule, value, callback) => {
              if (this.form.id) {
                // 编辑
                const res = await getDeptListApi()
                const arr = res.data.data.depts.filter(item => {
                  return item.pid === this.form.pid
                })
                const bool = arr.some(item => {
                  return item.name === this.form.name && item.id !== this.form.id
                })
                bool ? callback(new Error('同级部门名称不能重复')) : callback()
              } else {
                // 新增
                // 发送请求得到所有部门数据
                const res = await getDeptListApi()
                // 得到当前部门下得子部门
                const arr = res.data.data.depts.filter(item => {
                  return item.pid === this.currentid
                })
                // 遍历子部门,判断是否又同名存在
                const bool = arr.some(item => {
                  return item.name === value
                })
                bool ? callback(new Error('已将存在统计同名的部门')) : callback()
              }
            }
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度为1~50', trigger: 'blur' },
          {
            validator: async (rule, value, callback) => {
              if (this.form.id) {
                //  编辑
                const res = await getDeptListApi()
                const bool = res.data.data.depts.some(item => {
                  return item.code === value && item.id !== this.form.id
                })
                bool ? callback('code不能相同') : callback()
              } else {
                //  新增
                const res = await getDeptListApi()
                // 判断是否有相同的code存在
                var bool = res.data.data.depts.some(item => {
                  return item.code === value
                })
                bool ? callback(new Error('code不能相同')) : callback()
              }
            }
          }
        ],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '长度为1~300', trigger: 'blur' }
        ]
      },
      empList: []
    }
  },
  methods: {
    // 根据id得到部门详情
    async getDeptById(id) {
      const res = await getDeptByIdApi(id)
      this.form = res.data.data
    },
    // 发送请求获取员工列表
    async getEmpList() {
      const res = await getEmpListApi()
      this.empList = res.data.data
    },
    // 关闭新增部门
    cancle() {
      this.$emit('update:dialogShow', false)
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      // 重置表单验证
      this.$refs.myform.resetFields()
    },
    // 新增部门数据提交
    submit() {
      this.$refs.myform.validate(async valid => {
        if (valid) {
          if (this.form.id) {
            //  编辑
            await editDeptByIdApi(this.form)
          } else {
            //  新增
            await addDeptApi({
              ...this.form,
              pid: this.currentid === '604e115c7bfcfa45d019d3e9' ? '' : this.currentid
            })
          }
          ;(this.form = {
            name: '',
            code: '',
            manager: '',
            introduce: ''
          }),
            this.$message.success(this.form.id ? '编辑程功' : '新增成功')
          this.$emit('update:dialogShow', false)
          this.$emit('updateData')
        } else {
          this.$message.error('验证不通过')
        }
      })
    }
  },
  created() {
    this.getEmpList()
  }
}
</script>

<style></style>
